<script setup lang="ts">
  import { computed, PropType, ref, watch } from 'vue'
  import { CustomFormTemplate, CustomProcessNode } from '../hooks/types'
  import CustomInput from '../form/component-list/CustomInput.vue'
  import CustomMultipleSelect from '../form/component-list/CustomMultipleSelect.vue'
  import _ from 'lodash'
  import { useGetNodeCommanderList } from '../hooks/useProcess'

  const { nodeCommanderList, getNodeCommanderListLoading, getNodeCommanderList } =
    useGetNodeCommanderList()

  defineOptions({
    name: 'OrderCustomProcessSetting',
  })

  const emits = defineEmits<{
    (e: 'update', value: CustomProcessNode): void
  }>()

  const props = defineProps({
    template: {
      type: Object as PropType<CustomFormTemplate>,
      required: true,
    },
    activeNode: {
      type: Object as PropType<CustomProcessNode>,
      required: true,
    },
  })

  const node = ref<CustomProcessNode>({
    id: '',
    name: '',
    commanders: [],
    isStart: false,
    submit: false,
    isEnd: false,
    fieldPermissions: [],
  })
  const nodeCommanderOptions = computed(() => {
    return nodeCommanderList.value.map((item) => {
      return {
        label: item.name,
        value: item.id,
      }
    })
  })

  const emitsUpdateCall = () => {
    emits('update', node.value)
  }

  watch(
    () => props.activeNode,
    (value) => {
      if (value) {
        node.value = _.cloneDeep(value)
      }
    },
    {
      deep: true,
    },
  )

  defineExpose({
    getNodeCommanderList: async () => {
      await getNodeCommanderList()
      if (props.activeNode) {
        node.value = _.cloneDeep(props.activeNode)
      }
    },
  })
</script>

<template>
  <div v-loading="getNodeCommanderListLoading" class="order-custom-process-setting">
    <div class="setting">
      <div class="note-name">
        <div class="label">节点名称</div>
        <custom-input v-model="node.name" placeholder="请输入节点名称" @input="emitsUpdateCall" />
      </div>
      <div v-if="!node.isStart" class="commander">
        <div class="label">节点负责人</div>
        <custom-multiple-select
          v-model="node.commanders"
          placeholder="请选择节点负责人"
          :options="nodeCommanderOptions"
          @change="emitsUpdateCall"
        />
      </div>
      <el-table :border="true" max-height="400" :data="node.fieldPermissions">
        <el-table-column label="字段名" prop="fieldName" min-width="100"></el-table-column>
        <el-table-column label="可见" width="50" :align="'center'">
          <template #default="{ row }">
            <el-checkbox v-model="row.visible" size="small" @change="emitsUpdateCall"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="可编辑" width="70" :align="'center'">
          <template #default="{ row }">
            <el-checkbox v-model="row.edit" size="small" @change="emitsUpdateCall"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-checkbox) {
    height: 16px;
  }

  .order-custom-process-setting {
    .setting {
      width: 400px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      row-gap: 24px;

      .note-name,
      .commander {
        display: flex;
        flex-direction: column;
        row-gap: 4px;

        .label {
          font-size: 14px;
          font-weight: bold;
        }
      }

      .tab {
        margin-bottom: 12px;
      }

      .tab .el-segmented {
        --el-segmented-item-selected-color: #fff;
        --el-segmented-item-selected-bg-color: #007cff;
        width: 100%;
      }

      .node-operate {
        border: 1.5px solid rgba($color: #000000, $alpha: 0.1);
        padding: 4px 12px;
        border-radius: 8px;

        .node-operate-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 0;
          border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
          box-sizing: border-box;
        }

        .node-operate-item:last-child {
          border: none;
        }
      }

      .field-permission {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        flex: 1;
        height: 0;
        overflow: auto;

        .title,
        .permission-item {
          display: flex;

          .field-name {
            flex: 1;
          }

          .visible,
          .edit {
            width: 72px;
            padding: 0 12px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;

            :deep(.el-checkbox) {
              height: 19px;
            }
          }

          .field-name,
          .visible,
          .edit {
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>
